<template>
  <div
    class="absolute-container"
    style="position: fixed;"
  >
    <div
      class="full-height"
      @mouseenter="handleMouseEvent('enter')"
      @mouseleave="handleMouseEvent('leave')"
    >
      <div
        :class="['image-box',{'acitve-image': currentIndex === index}]"
        v-for="(item,index) in items"
        :key="index"
      >
        <img :src="item.bg">
      </div>
    </div>
    <div class="swipter-dot-container">
      <div
        v-for="(item,index) in items"
        :key="index"
        @click="currentIndex=index"
        :class="['swiper-dot', {'active-dot': currentIndex === index}]"
      >
        <img :src="item.dotBg">
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Swiper',
  data () {
    return {
      currentIndex: 0
    }
  },
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    this.createTimer()
  },
  beforeDestroy () {
    this.timer && clearTimeout(this.timer)
  },
  methods: {
    handleMouseEvent (type) {
      type === 'enter' ? clearTimeout(this.timer) : this.createTimer()
    },
    createTimer () {
      this.timer = setInterval(() => {
        this.next()
      }, 4500)
    },
    next () {
      if (this.currentIndex !== this.items.length - 1) {
        this.currentIndex++
      } else {
        this.currentIndex = 0
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  .image-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.8s;
  }

  .acitve-image {
    opacity: 1;
  }

  .swipter-dot-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    z-index: 99;
  }

  .swiper-dot {
    width: 40px;
    height: 40px;
    border: 3px solid #bddcfa15;
    margin-right: 8px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
  }

  .swiper-dot:last-child {
    margin-right: 0;
  }

  .active-dot {
    border: 3px solid #05cef9;
  }

  img {
    width: 100%;
    height: 100%;
  }
</style>
